﻿/* -- Copyright © Microsoft Corporation. All rights reserved. */

/*-----------------------------------------------------------------------------  
    checkbox and radio button labels
-----------------------------------------------------------------------------*/

.checkboxLabel, .radioLabel
{
    font-family:"Segoe UI";
}

.ui-light .checkboxLabel, .ui-light .radioLabel
{
    color: rgb(33, 33, 33);
}

.ui-dark .checkboxLabel, .ui-dark .radioLabel
{
    color: rgb(255, 255, 255);
}

/*-----------------------------------------------------------------------------  
    Form section
-----------------------------------------------------------------------------*/

.formSection
{
    margin: 0px;
    padding: 0px;
    border: 0px;
}


/*-----------------------------------------------------------------------------  
    Form section heading
-----------------------------------------------------------------------------*/

.formSectionHeading 
{
    font-family:"Segoe UI Light";
    line-height:32px;
    font-size:20pt;
    margin:38px 0px 29px 0px;
}
    

/*-----------------------------------------------------------------------------  
    Tow column form container
-----------------------------------------------------------------------------*/
.twoColumnFormContainer
{
    display: -ms-grid;
    -ms-grid-columns: 50% 50%;
    min-width: 640px;
    max-width: 740px;
}


/*-----------------------------------------------------------------------------  
    Control groups (radio, checkbox button group)
-----------------------------------------------------------------------------*/
.controlGroup
{
    margin: 0px 0px 20px 0px;
    padding: 0px;
    border: 0px;
}


.controlGroupName
{
    font:normal normal normal 11pt/15pt "Segoe UI Semilight";
    margin:0px 0px 10px 0px;
    padding:0px;
    border: 0px;
    position:relative;
    vertical-align:top;
    display:block;
}

/*-----------------------------------------------------------------------------  
    Horizontal label layout
-----------------------------------------------------------------------------*/

.horizontalLabelLayout
{
    margin-right:20px;
}

/*-----------------------------------------------------------------------------  
    push button group  
-----------------------------------------------------------------------------*/

.buttonGroup 
{
    margin: 30px 0px 0px 0px;
    text-align: right;
}

.horizontalButtonLayout
{
    margin: 0px 0px 0px 20px;
}


/*-----------------------------------------------------------------------------  
    Vertical spacing to separate stacking form controls
-----------------------------------------------------------------------------*/
.verticalStacking button,
.verticalStacking input[type=button],
.verticalStacking input[type=submit],
.verticalStacking input[type=reset],
.verticalStacking .win-toggle,
.verticalStacking .win-rating
{
    margin-bottom:20px;
}

.verticalStacking input[type="checkbox"]
{
    margin-bottom: 16px;
}

.verticalStacking input[type="radio"]
{
    margin-bottom: 14px;
}

.verticalStacking select,
.verticalStacking input[type=text], .verticalStacking input[type=password], .verticalStacking input[type=email], .verticalStacking input[type=number], .verticalStacking input[type=tel], .verticalStacking input[type=url], .verticalStacking input[type=search],
.verticalStacking textarea, .verticalStacking .win-textarea
{
    margin-bottom: 24px;
}
.error {
     display:none;
     color:red;
}

span.hide {
    display:none;
}

span.success{
     color:lime;
     display:block;
}

/*-----------------------------------------------------------------------------  
    element columns  
-----------------------------------------------------------------------------*/

div.name
{
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

div.pass
{
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}

div.email
{
    -ms-grid-row: 2;
    -ms-grid-column: 1;
}

div.tel
{
    -ms-grid-row: 2;
    -ms-grid-column: 2;
}

div.city
{
    -ms-grid-row: 3;
    -ms-grid-column: 1;
}

div.state
{
    -ms-grid-row: 3;
    -ms-grid-column: 2;
}

div.birth
{
    -ms-grid-row: 4;
    -ms-grid-column: 1;
}

div.learn
{
    -ms-grid-row: 4;
    -ms-grid-column: 2;
}

div.empty
{
    -ms-grid-row: 5;
    -ms-grid-column: 1;
}

div.agree
{
    -ms-grid-row: 5;
    -ms-grid-column: 2;
}

div.buttons
{
    -ms-grid-row: 6;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
}